<template>
	<view class="scen-details bg-custom" v-if="scenLoad">
		<bar-title  :isSolid="false" bgColor="bg-custom">
			<block slot="content">剧本详情</block>
		</bar-title>
		
		<!-- 剧本信息 -->
		<view class="scen-head">
			<view class="scen-img">
				<image class="jb" :src="scenDetails.scenimg" ></image>
			</view>
			<view class="scen-title">
				<view class="title text-black text-bold">{{scenDetails.scenname}}</view>
				<text class="cu-tag round sm">{{scenDetails.scennum}}人本</text>
			</view>
			<view class="tag-group text-cut" v-if="tags.length">
				<block v-for="(tag, index) of tags" :key="index">
					<view class='cu-tag line-gray round sm'>{{tag}}</view>
				</block>
			</view>
		</view>
		
		<!-- 剧本评分 -->
		<view class="scen-grade bg-white padding-top" >
			<view class="scen-score">
				<view class="score">
					<text class="num">{{scenDetails.scenscore}}</text>分
				</view>
				<star-group :score="scenDetails.scenscore" :scoreShow="false"></star-group>
			</view>
			<view class="score-group">
				<block v-for="(num,index) of 5" :key="index">
				<view class="score-item">
					<view class="score-warp" :class="'star'+ (5-index)">
						<block v-for="snum of (5-index)" :key="snum">
						<text class="star"></text>
						</block>
					</view>
					<view class="cu-progress round xs">
						<view class="bg-orange" :style="'width:'+ scenDetails['scorepercent'+ (5-index)] + '%'"></view>
					</view>
				</view>
				</block>
			</view>
		</view>
		
		<view class="bg-white">
			<view class="scen-btn flex response ">
				<button class="cu-btn block round line-cyan">
					<text class="cuIcon-like margin-right-xs"></text> 想玩
				</button>
				<button class="cu-btn block round line-cyan">
					<text class="cuIcon-time margin-right-xs"></text> 玩过
				</button>
			</view>
			
			<view class="padding-bottom" v-if="inftro">
				<view class="intro-box" v-if="brief.strIsCut(inftro)">
					<view class="open" @click="openIntro" v-if="openIntroStatus">展开</view>
					<view class="title">故事背景</view>
					<view class="intro">
						{{brief.stringCut(inftro, openIntroStatus)}}
						<text class="close" 
							@click="closeIntro" 
							v-if="!openIntroStatus"
						>收起</text>
					</view>
				</view>
				<view class="intro-box" v-else>
					<view class="title">故事背景</view>
					<view class="intro">
						{{inftro}}
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		<!-- 发行介绍 -->
		<view class="publish-box bg-white" 
			v-if="scenDetails.lssuername"
		>
			
			<view class="title-warp">发行介绍</view>
			<view class="publish-info padding-lr padding-bottom">
				<view class="publish-logo">
					<image class="logo" :src="scenDetails.tlssimg" mode="aspectFill"></image>
				</view>
				<view class="title">{{scenDetails.lssuername}}</view>
				<view class="intro text-cut-2">{{scenDetails.introduction}}</view>
			</view>
		</view>
		
		<!-- 人物介绍 -->
		<view class="personage-warp bg-white margin-top" v-if="scenDetails.plotlist.length">
			<view class="title-warp">人物介绍</view>
			<scroll-view scroll-x="true" class="personage-scroll"  >
				<view class="personage-list" >
					<block v-for="(personage,index) in scenDetails.plotlist" :key="index">
						<view class="personage" >
							<view class="pimg">
								<image class="pimg_img" :src="personage.perimg"></image>
							</view>
							<view class="scenname text-cut">{{personage.pername}}</view>							
						</view>
					</block>
					<view class="personage empty"> </view>
				</view>
			</scroll-view>
		</view>
		

		<!-- 推荐店铺 -->
		<view class="recommend-store bg-white" v-if="scenDetails.shoplist.length">
			<view class="title-warp">推荐店铺</view>
			<view class="store-list">
				<block v-for="(store,index) of scenDetails.shoplist" :key="index">
					<view class="store-warp" @click="$jumpPages('shopinfo',{shopid: store.shopid})">
						<view class="simg">
							<image class="logo" :src="store.shopimg"></image>
						</view>
						<view class="sinfo">
							<view class="title">{{store.shopname}}</view>
							<view class="remark">
								
								<star-group :score="store.shoprate"></star-group>
								<text class="comments margin-left-xs">{{store.momentnum}}条评论</text>
								<text class="capite margin-left-xs">￥{{store.mintax}}/人均</text>
							</view>
							<view class="address">
								{{store.city}}/{{store.district}}/{{store.shopadress}} | {{store.distance}}km
							</view>
						</view>							
					</view>
				</block>
				
			</view>
		</view>
		
		
		
		<!-- 查看剧本评价 -->
		<view class="jb-commit" 
			@tap="showModal" 
			data-target="introModal">
			<view class="title">
				<text class="sub">剧本评价({{scenDetails.scencommentnum}})</text>
			</view> 
		</view>
		<view class="cu-modal bottom-modal" 
			:class="modalName=='introModal'?'show':''"
			@tap="hideModal"
			@touchmove.stop.prevent="preventhidden"
		>
			<view class="cu-dialog bg-white radius-top"
				@tap.stop="preventhidden"
			>
				<view class="dialog-title">
					<view class="close" @click="hideModal"></view>
					<view class="title">
						<text class="sub">剧本评价({{scenDetails.scencommentnum}})</text>
					</view> 
					<view class="filter-box">
						<block v-for="(ctype,index) of commitTypes" :key="index">
							<view class="filter" :class="{active: index == commitTypeIndex}"
								@click="commitTypeTap(index)"
							>{{ctype.name}}</view>
						</block>
					</view> 
				</view>
				<scroll-view scroll-y class="dialog-container"
					
					@scrolltolower="loadData"
				>
					<block v-for="(item,index) of commitList" :key="index">
						<view class="commit-warp">
							<view class="commit-hd">
								<image class="avatar" :src="item.headurl"></image>
								<view class="nickname">{{item.nickname}}</view>
								<view class="play">玩过</view>
								<star-group :score="item.reviewscore+''"
									:scoreShow="false"
								></star-group>
							</view>
							<view class="commit-sub">{{brief.textdata(item.critictitle)}}</view>
							<view class="commit-content">
								<view class="content-box">
									<view class="content">
										{{brief.textdata(item.criticcontent)}}
									</view>
									<view class="total">
										{{item.replynum}}回复 · {{item.likenum}}点赞
									</view>
								</view>
								<view class="img-box" v-if="item.imgurl">
									<image class="cimg" :src="item.imgurl" ></image>
								</view>
							</view>
							
							
						</view>
					</block>
					
					
					<view class="">
						<empty v-if="empty"></empty>
					</view>
				</scroll-view>
				
				
				<!-- <view class="go-commit">
					<image class="icon" src="/static/img/ic_pen.png" ></image>
				</view> -->
				
			</view>
		</view>
		
	</view>
</template>
<script module="brief" lang="wxs">
    function strIsCut(str) {
    	var cutStatus = !!(str.length > 60 )
        return cutStatus
    }
	function stringCut(str, status) {
		if(status) {
			str = str.substring(0, 60) + '......'
		}
        return str
    }
	function textdata (title) {
		if (!title) return ''
		return decodeURI(title)
	}
    module.exports = {
		strIsCut: strIsCut,
		stringCut: stringCut,
		textdata: textdata
    }
</script>

<script>
import { Scen } from '@/models/scen.js';
import starGroup from '@/components/basics/star-group.vue';
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import empty from "@/components/basics/empty";
export default {
	components: {
		uniLoadMore,
		starGroup,
		empty
	},
	data() {
		return {
			scenid: 'sc20200303111611017',
			scenLoad: false,
			scenDetails: {},
			tags: [],
			isLike: false,
			modalName: null,
			openIntroStatus: true,
			inftro: '',
			loadingType: 'more',
			pagenum: 1,
			empty: false,
			commitList:[],
			commitTypeIndex: 0,
			commitTypes: [{
				type: 'hot',
				name: '热门'
			}, {
				type: 'new',
				name: '最新'
			}, {
				type: 'friend',
				name: '好友'
			}]
		}
	},
	onLoad(option) {
		if(option && option.scenid) {
			this.scenid = option.scenid || 'sc20200104122758806'
			this.getScenDetails()
			this.getScenComments()
			
		}
	},
	methods: {
		preventhidden() {
			return false
		},
		async getScenDetails() {
			let scenDetails = await Scen.getScenDetails(this.scenid)
			// console.log(scenDetails);
			this._formatData(scenDetails)
			this.scenDetails = scenDetails
			this.scenLoad = true
		},
		async getScenComments() {
			this.loadingType = 'loading'
			this.empty = false
			let type = this.commitTypes[this.commitTypeIndex].type
			let commitList = await Scen.getScenComments({
				scenid:this.scenid,
				pagenum:this.pagenum,
				type
			})
			this.commitList = this.commitList.concat(commitList)
			this.empty = commitList.length===0
			if (commitList.length < 20) {
				this.loadingType = 'noMore'
				return
			}
			
			this.loadingType = 'more'
		},
		loadData() {
			if(this.loadingType == 'loading' || this.loadingType == 'noMore'){
			    return
			}
			this.pagenum = this.pagenum + 1
			this.getScenComments()
		},
		commitTypeTap(index) {
			if(this.commitTypeIndex == index) return
			this.commitTypeIndex = index
			this.commitList = []
			this.pagenum = 1
			this.getScenComments()
		},
		_formatData(scenDetails) {
			this.inftro = scenDetails.scencontext
			let scenstyle = scenDetails.scenstyle
			if (!!scenstyle) {
				this.tags = scenstyle.split(' ')
			}
		},
		
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target
		},
		hideModal(e) {
			this.modalName = null
		},
		openIntro() {
			this.openIntroStatus = false
		},
		closeIntro() {
			this.openIntroStatus = true
		}
	}
}
</script>

<style lang="scss" scoped>
.jb-commit{
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	border-radius: 30rpx 30rpx 0 0 ;
	box-shadow: 1px 0px 8px rgba(13, 5, 9, 0.2);
	&::after{
		content: '';
		position: absolute;
		left: 50%;
		top: 20rpx;
		width: 112rpx;
		height: 12rpx;
		margin-left: -56rpx;
		background-color: rgba(13, 4, 9, 0.1);
		border-radius: 10rpx;
	}
	.title{
		color: #505050;
		margin: 50rpx 30rpx 0;
	}
	.sub{
		font-weight: 700;
		font-size: 28rpx;
		margin-right: 20rpx;
	}
}
.go-commit{
	
	width: 90rpx;
	height: 90rpx;
	position: fixed;
	bottom: 157rpx;
	right: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	.icon{
		width: 90rpx;
		height: 90rpx;
	}
}
.recommend-store{
	padding-bottom: 140rpx;
}
.scen-details{
	.dialog-title{
		background-color: #FFFFFF;
		height: 120rpx;
		border-bottom: 1px solid #E1E1E1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 30rpx 0;
		color: #909090;
		.title{
			color: #505050;
		}
		.sub{
			font-weight: 700;
			font-size: 28rpx;
			margin-right: 20rpx;
		}
		.filter-box{
			color: #505050;
			display: flex;
			align-items: center;
			background-color: #F6F6F6;
			width: 240rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 40rpx;
			font-size: 22rpx;
			.filter{
				width: 80rpx;
				height: 40rpx;
				border-radius: 40rpx;
				text-align: center;
			}
			.active{
				background-color: #FFFFFF;
				box-shadow: 1px 0px 4px rgba(13, 5, 9, 0.2);
			}
		}
	}
	.dialog-container{
		height: calc(100% - 120rpx);
		text-align: left;
	}
	.cu-dialog{
		height: calc(100vh - 200px);
		background-color: #F7F9FF;
		border-radius: 30rpx 30rpx 0 0 ;
		box-shadow: 1px 0px 8px rgba(13, 5, 9, 0.2);
		.close{
			position: absolute;
			left: 50%;
			top: 20rpx;
			width: 112rpx;
			height: 12rpx;
			margin-left: -56rpx;
			background-color: rgba(13, 4, 9, 0.1);
			border-radius: 10rpx;
		}
	}
}
.commit-warp{
	padding: 50rpx 30rpx;
	margin-bottom: 20rpx;
	
	background-color: #FFFFFF;
	.commit-hd{
		display: flex;
		align-items: center;
		font-size: 22rpx;
		margin-bottom: 20rpx;
		.avatar{
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
		.nickname{
			color: #323232;
			margin-right: 10rpx;
		}
		.play{
			color: #909090;
			margin-right: 10rpx;
		}
	}
	.commit-sub{
		font-size: 28rpx;
		color: #323232;
		margin-bottom: 20rpx;
	}
	.commit-content{
		font-size: 26rpx;
		color: #909090;
		margin-bottom: 20rpx;
		display: flex;
		.content-box{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.content{
			line-height: 1.5;	
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			margin-bottom: 16rpx;
		}
		.img-box{
			display: flex;
			margin-left: 20rpx;
			padding-bottom: 16rpx;
			.cimg{
				width: 220rpx;
				height: 144rpx;
				border-radius: 10rpx;
			}
		}
		.total{
			color: #BBBBBB;
			font-size: 20rpx;
		}
	}
	
}
.scen-head{
	padding-top: 40upx;
	position: relative;
	padding-left: 291rpx;
	min-height: 200rpx;
	.scen-img{
		width: 210rpx;
		height: 290rpx;
		box-shadow: 1px 0px 8px rgba(13, 5, 9, 0.2);
		border-radius: 20rpx;
		overflow: hidden;
		position: absolute;
		left: 40rpx;
		top: 40rpx;
		z-index: 1;
		.jb{
			width: 210rpx;
			height: 290rpx;
		}
	}
	.scen-title{
		padding-top: 36rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.title{
			font-size: 32rpx;
			margin-right: 20rpx;
		}
		.cu-tag{
			background-color: #2EB9C3;
			color: #FFFFFF;
		}
	}

}
.scen-btn{
	padding: 15rpx;
	.cu-btn{
		flex: 1;
		margin: 15rpx;
	}
}
.intro-box{
	margin: 0 30rpx;
	border-radius: 20rpx;
	padding: 30rpx 44rpx;
	background-color: #F7F9FF;
	color: #4F4F4F;
	font-weight: 400;
	font-size: 24rpx;
	line-height: 1.6;
	position: relative;
	.title{
		color: #000000;
		font-weight: 700;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}
	.open{
		color: #BABABA;
		font-size: 24rpx;
		text-decoration: underline;
		position: absolute;
		right: 44rpx;
		background-color:  #F7F9FF;
		bottom: 30rpx;
	}
	.close{
		color: #BABABA;
		font-size: 24rpx;
		text-decoration: underline;
		margin-left: 10rpx;
		display: inline-block;
	}
}
.store-warp{
	margin: 30rpx;
	padding: 30rpx;
	border-radius: 10rpx;
	box-shadow: 1px 1px 8px rgba(13, 4, 9, 0.05);
	.simg{
		float: left;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		.logo{
			width: 100rpx;
			height: 100rpx;
		}
	}
	.sinfo{
		margin-left: 130rpx;
		font-size: 24rpx;
		.title{
			font-weight: 700;
			color: #000000;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}
		.remark{
			display: flex;
			margin-bottom: 10rpx;
		}
		.score{
			color: #F98629;
		}
	}
}

.scen-grade{
	padding-left: 291rpx;
	display: flex;
	padding-bottom: 36rpx;
	.score{
		color: #000000;
		font-size: 28rpx;
		margin-bottom: 18rpx;
		.num{
			font-size: 42rpx;
			margin-right: 4rpx;
		}
	}
	.score-group{
		flex: 1;
		margin-right: 40rpx;
		padding-top: 8rpx;
		.score-item{
			display: flex;
			align-items: center;
			margin-bottom: 7rpx;
		}
		.score-warp{
			margin-right: 7rpx;
			width: 110rpx;
			justify-content: flex-end;
			.star{
				width: 11rpx;
				height: 11rpx;
			}
		}
	}
}

.score-warp{
	display: flex;
	align-items: center;
	flex-shrink: 0;
	.star{
		width: 20rpx;
		height: 20rpx;
		margin-right: 1px;
		background-image: url(/static/img/ic_index_star_normal.png);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}
	&.star1 .star:nth-child(1),
	&.star2 .star:nth-child(-n + 2),
	&.star3 .star:nth-child(-n + 3),
	&.star4 .star:nth-child(-n + 4),
	&.star5 .star:nth-child(-n + 5) {
		background-image: url(/static/img/ic_index_star_select.png);
	}
	&.star0.dot .star:nth-child(1),
	&.star1.dot .star:nth-child(2),
	&.star2.dot .star:nth-child(3),
	&.star3.dot .star:nth-child(4),
	&.star4.dot .star:nth-child(5) {
		background-image: url(/static/img/ic_index_star_half.png);
	}
	
	.score{
		line-height: 1;
		font-size: 20rpx;
		font-weight: 400;
		color: #000000;
	}
}

.publish-box{
	padding-bottom: 30rpx;
	.publish-logo{
		position: absolute;
		left: 30rpx;
		top: 0;
		width: 110rpx;
		height: 110rpx;
		border: 1px solid #E1E1E1;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.logo{
			width: 76rpx;
			height: 76rpx;
		}
	}
	.publish-info{
		position: relative;
		padding-left: 170rpx;
		margin-top: 30rpx;
		.title{
			color: #323232;
			font-size: 28rpx;
			margin-bottom: 8rpx;
		}
		.intro{
			color: #909090;
			font-size: 22rpx;
		}
	}
}
.title-warp{
	padding: 40rpx 30rpx 10rpx;
	color: #000000;
	font-size: 32rpx;
	font-weight: 700;
}


.personage-scroll{
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.personage-list {
	padding:  20rpx 10rpx ;
	display: flex;
	white-space: nowrap;
	.personage {
		padding-bottom: 10rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		position: relative;
		line-height: 1.6;
		position: relative;
		overflow: hidden;
		flex-shrink: 0;
		text-align: center;
		.pimg {
			display: block;
			width: 168rpx;
			height: 234rpx;
			overflow: hidden;
			border-radius: 10rpx;
			background-color: #EAEAEA;
		}
		.pimg_img{
			width: 168rpx;
			height: 234rpx;
		}
		.scenname{
			text-align: left;
			width: 168rpx;
			font-size: 11px;
			line-height: 1;
			font-weight: 400;
			padding: 20rpx 0 12rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;  
		}
	}
	.empty{
		min-width: 10rpx;
	}
}



</style>
